<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./../../WEB-INF/templates/newMainTemplateWithFooter.xhtml">
            <ui:define name="content">
                <h:outputStylesheet library="css" name="recover/recover.css"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="recover/recover_desktop.css" media="screen and (min-width:1025px) and (max-width:1600px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="recover/recover_desktop_wide.css" media="screen and (min-width : 1601px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="recover/recover_tablet.css" media="screen and (min-device-width : 768px) and (max-device-width : 1024px), screen and (max-width:1024px)"></h:outputStylesheet>
                <h:outputStylesheet library="css" name="recover/recover_smartphone.css" media="screen and (min-device-width : 320px) and (max-device-width : 767px), screen and (max-width:767px)"></h:outputStylesheet>

                <h:form id="recoverForm" styleClass="block fullWidthContainer marginTopPanel ">
                    <p:growl id="growl" showDetail="false" life="4000"/>
                    <f:metadata>
                        <f:viewParam for="recharge" requiredMessage="#{messages.Recharge}" name="id" value="#{recoveryPasswordBean.recoverId}"></f:viewParam>
                    </f:metadata>
                    <h:outputText id="recharge"></h:outputText>
                    <p:panel styleClass="darkGrayBackgroundTitle  noMargin fullPanelMargin noPaddingTitle fullWidthPanelTitlePadding darkGrayBorder recoverPanel" id="recoveryPanel" header="#{messages.Recover}">
                        <p:panel styleClass="noMargin noPadding noBorder width100" >

                            <div class="block verticalAlignTop textAlignLeft">
                                <p:inputText styleClass="recoveryInput"  id="recoveryEmail" value="#{recoveryPasswordBean.email}">
                                    <f:validator  binding="#{loginEmailValidator}"></f:validator>
                                </p:inputText>
                                <p:watermark for="recoveryEmail" value="#{messages.Email}" />
                            </div>
                            <div class="block verticalAlignTop textAlignLeft">
                                <p:password  styleClass="recoveryInput" id="password" match="password2" feedback="true" value="#{recoveryPasswordBean.newPassword}" required="true" requiredMessage="#{messages.PasswordRequired}" label="#{messages.Password}">
                                    <f:validateLength minimum="5" maximum="30"></f:validateLength>
                                </p:password>
                                <p:watermark for="password" value="#{messages.Password}" />
                            </div>
                            <div class="block verticalAlignTop textAlignLeft">
                                <p:password styleClass="recoveryInput" id="password2" feedback="true" value="#{recoveryPasswordBean.newPassword}" required="true" requiredMessage="#{messages.RepeatPasswordRequired}" label="#{messages.RepeatPassword}">
                                </p:password>
                                <p:watermark for="password2" value="#{messages.RepeatPassword}" />
                            </div>
                            <div class="block verticalAlignTop textAlignLeft">
                                <p:commandButton styleClass="blueBackgroundStrong marginBottom05em recoveryButton" update="growl" value="#{messages.Recover}"  action="#{recoveryPasswordBean.changePassword()}"></p:commandButton>
                            </div>

                        </p:panel>
                    </p:panel>
                </h:form>

            </ui:define>

        </ui:composition>

    </body>
</html>
